<template>
  <div>
    <m-header :class="{'boxActive': fixed === true}"></m-header>
    <!--根据导航选择的内容的子路由出口-->
    <router-view></router-view>
    <m-footer class="top"></m-footer>
  </div>
</template>

<script>
import MHeader from '@/common/MHeader'
import MFooter from '@/common/MFooter'
export default {
  name: 'Index',
  data () {
    return {
      fixed: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.fixedActiveBtn)
  },
  methods: {
    fixedActiveBtn () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      scrollTop >= 95 ? this.fixed = true : this.fixed = false
      if (scrollTop >= 95) {
        // document.getElementsByClassName('nav-aside')[0].style.position = 'absolute'
        document.getElementsByClassName('nav-aside')[0].style.top = 90 + 'px'
      } else {
        document.getElementsByClassName('nav-aside')[0].style.top = 0 + 'px'
      }
    }
  },
  components: {
    MHeader,
    MFooter
  }
}
</script>

<style scoped>
  .boxActive{
    position: fixed;
    top: -100px;
    z-index: 999;
  }

  .top {
    float: left;
    margin-top: 30px;
  }
</style>
